<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import element-ui CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="./js/vue.js"></script>
  <!-- import element-ui JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="./js/axios.min.js"></script>
</head>
<body>
<!--编写标签-->
<div id="app">
  <el-row>
    <el-button type="primary" @click="style1" id="1">1.主程序-子程序软件体系结构</el-button>
    <el-button type="primary" @click="style2" id="1">2.面向对象软件体系结构</el-button>
    <el-button type="primary" @click="style3" id="1">3.事件系统软件体系结构</el-button>
    <el-button type="primary" @click="style4" id="1">4.管道-过滤软件体系结构</el-button>
  </el-row>
  <template>
    <el-table
            :data="tableData"
            style="width: 100%">
      <el-table-column
              prop="msg"
              label="运行结果"
              width="180">
      </el-table-column>
    </el-table>
  </template>

  <div class="demo-image__placeholder">
    <span class="demonstration">软件体系结构图：</span>
    <div class="block">

      <el-image :src="src"></el-image>
    </div>
  </div>
</div>
</body>

<script>
  // 创建vue
  new Vue({
    // 控制的标签容器
    el: '#app',
    // 交互的数据
    data() {
      return {
        src: '',
        tableData:[],
        //visible: false
      }
    },
    // 方法
    methods: {
      style1() {
        this.tableData=[];
        this.src=''
        axios({
          method:"get",
          url:"http://localhost:8081/style/1"
        }).then((resp)=>{
          this.tableData=resp.data,
          this.src="1.png"
        });
      },
      style2(){
        this.tableData=[];
        this.src=''
        axios({
          method:"get",
          url:"http://localhost:8081/style/2"
        }).then((resp)=>{
          this.tableData=resp.data
          this.src="2.png"
        });
      },
      style3(){
        this.tableData=[];
        this.src=''
        axios({
          method:"get",
          url:"http://localhost:8081/style/3"
        }).then((resp)=>{
          this.tableData=resp.data
          this.src="3.png"
        });
      }
      ,
      style4(){
        this.tableData=[];
        this.src=''
        axios({
          method:"get",
          url:"http://localhost:8081/style/4"
        }).then((resp)=>{
          this.tableData=resp.data
          this.src="4.png"
        });
      }
    }
  })
</script>
</html>
